<template>
  <div class="course-reply-container">

    <div class="box">

      <!--头像-->
      <div class="head-portrait">
        <Avatar icon="ios-person" :size="50" :src="comment.userInfo.headPortraitUrl"/>
      </div>

      <!--用户-->
      <div class="user">
        <!--用户名-->
        <div class="user-details">
          {{ comment.userInfo.nickName }}
        </div>

        <!--文本-->
        <div class="discuss-text">
          <div class="text">{{ comment.discuss.content }}</div>
        </div>

        <!--互动-->
        <div class="interaction">
          <!--时间-->
          <div class="date-time"> {{ comment.discuss.createdDateTime }}</div>

          <!--赞-->
          <div class="like"
               @mouseenter="hover(comment,`like`)"
               @mouseleave="over(comment,`like`)"
               @click="isLike(comment,'like')">

            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='like'
                     v-if="!comment.discuss.like&&!comment.discuss.likeHover"></IconAli> <!--喜欢为false,并且hover为false-->
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='liked'
                     v-if="comment.discuss.like"></IconAli><!--喜欢值为true-->
            <!--喜欢为true时展示-->
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='like-hover'
                     v-if="!comment.discuss.like&&comment.discuss.likeHover"></IconAli> <!--喜欢为false,hover为true展示-->
          </div>

          <!--点赞数-->
          <div class="like-count">{{ comment.discuss.likeNum }}</div>

          <!--踩-->
          <div class="unlike"
               @mouseenter="hover(comment,`unlike`)"
               @mouseleave="over(comment,`unlike`)"
               @click="isLike(comment,'unlike')">

            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='unlike'
                     v-if="!comment.discuss.unlike&&!comment.discuss.unlikeHover"></IconAli>
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='unliked'
                     v-if="comment.discuss.unlike"></IconAli>
            <IconAli :sty="{width:'18px',height:'18px',marginTop:'2px'}" icon='unlike-hover'
                     v-if="!comment.discuss.unlike && comment.discuss.unlikeHover"></IconAli>
          </div>

          <!--回复-->
          <div class="reply">回复</div>

        </div>

        <!--互相回复-->
        <div class="c-c" v-for="(o,j) in comment.discuss.discussList" :key="o.discussId">
          <CourseReplySmall :obj="o"></CourseReplySmall>
        </div>

        <!--回复框-->

      </div>

    </div>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import CourseReplySmall from "@/components/course/CourseReplySmall";

export default {
  //组件名称
  name: "CourseReply",
  props: {
    obj: {
      commentId: "",
      discuss: {
        content: "",
        createdDateTime: "",
        likeNum: "",
        likeHover: false,
        unlike: "",
        unlikeHover: false,
        likeCount: 0,
        replyFlag: false,
      },
      toUserInfo: {
        userId: "",
        nickName: "",
        headPortraitUrl: "",
      },
      userInfo: {
        userId: "",
        nickName: "",
        headPortraitUrl: "",
      },
    }
  },
  //组件注册
  components: {IconAli, CourseReplySmall},
  //数据驱动
  data() {
    return {
      comment: JSON.parse(JSON.stringify(this.obj)),
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    getText(text) {
      let str = text.replace(/\n/g, '<br/>');
      return str;
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    dateFormat(value) {
      let time = new Date(value);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm);
    }
    ,
    hover(comment, str) {
      switch (str) {
        case 'like':
          comment.discuss.likeHover = true
          break;
        case 'unlike':
          comment.discuss.unlikeHover = true
          break;
      }
    }
    ,
    over(comment, str) {
      switch (str) {
        case 'like':
          comment.discuss.likeHover = false
          break;
        case 'unlike':
          comment.discuss.unlikeHover = false
          break;
      }
    }
    ,

//赞或者踩
    isLike(comment, str) {
      let likeFlag = comment.discuss.like;
      let unlikeFlag = comment.discuss.unlike;

      //两个都为 false,说明此时既没有赞也没有踩
      if (!likeFlag && !unlikeFlag) {
        switch (str) {
          case "like":
            comment.discuss.like = true
            comment.discuss.likeNum++
            break;
          case "unlike":
            comment.discuss.unlike = true
            break;
        }
        return;
      }
      // 已经点赞 likeFlag=true, unlikeFlag=false
      if (likeFlag && !unlikeFlag) {
        switch (str) {
          case "like":  //本次点击的的赞,将赞取消,并且喜欢的值-1
            comment.discuss.like = false
            break;
          case "unlike": //本次点击的是踩,将赞取消,将踩点亮,并且喜欢的值-1
            comment.discuss.like = false
            comment.discuss.unlike = true
            break;
        }
        comment.discuss.likeNum--
        return;
      }
      // 已经踩,unlikeFlag=true,likeFlag=false
      if (unlikeFlag && !likeFlag) {
        switch (str) {
          case "like":  //本次点击的的赞,赞点亮,踩取消,喜欢的值+1
            comment.discuss.like = true
            comment.discuss.unlike = false
            comment.discuss.likeNum++
            break;
          case "unlike": //本次点击的是踩
            comment.discuss.unlike = false
            break;
        }
        return;
      }
    }
    ,
  },
//钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.course-reply-container {

  .box {
    display: flex;
    padding: 0px 0px;

    .head-portrait { //头像
      padding: 0px 10px 0px 10px;
      cursor: pointer;
    }

    .user {
      //border: 1px solid #F00;
      margin-right: 20px;
      width: calc(100% - 70px);
      max-width: calc(100% - 70px);

      .user-details { //用户详情
        font-size: 14px;
        cursor: pointer;
      }

      .discuss-text { //讨论文本

        margin-top: 2px;
        //background-color: #F4F4F4;
        background-color: #F8F8F8;
        padding: 6px 10px 10px 6px;
        border-radius: 8px;

        .text{
          white-space:pre-wrap;
          overflow:hidden;			//超出隐藏
          text-overflow:ellipsis;		//文本...
        }
      }

      .interaction { //互动
        display: flex;

        .date-time {
          color: #9499A0;
        }

        .like {
          margin-left: 20px;
          cursor: pointer;
        }

        .like:hover {
          //width: 18px;
          //height: 18px;
          //margin-top:2px;
          background-size: cover;
          //background-image: url('~@/assets/course/like.png');
        }

        .like-count {
          margin: 2px 0px 0px 4px;
        }

        .unlike {
          margin-left: 20px;
          cursor: pointer;
        }

        .reply {
          margin-left: 20px;
          color: #9499A0;
          cursor: pointer;
        }

        .reply:hover {
          color: #00AEEC;
        }
      }
    }
  }
}
</style>